<template>
  <el-dialog
    custom-class="goodsGroupDialog"
    :close-on-click-modal="false"
    top="5vh"
    :title=" `选择直播源 (${checkboxGroup.length}/10)`" 
    :visible="liveDialogIsShow"
    width="50%"
    @close="emitClose"
  >
    <div class="dialog-content">
      <div class="dis w100e contentWrap">
        <div class="leftWrap">
          <el-scrollbar wrap-class="scrollY">
            <div class="leftItem dis dis_ju al_item" @click="checkedLeftItem(item.children,index)" :class="{activeClass: activeIndex == index}" v-for="(item,index) in liveDataList" :key="index">{{item.name}}</div>
          </el-scrollbar>
        </div>
        <div class="rightWrap">
          <el-scrollbar wrap-class="scrollY">
            <el-checkbox-group v-model="checkboxGroup">
              <el-checkbox :label="item.id" v-for="(item,index) in rightData" :key="index">{{item.roomName}}</el-checkbox>
            </el-checkbox-group>
          </el-scrollbar>
        </div>
      </div>
      <div slot="footer" style="text-align: right;margin-top: 20px;">
        <el-button size="mini" type="primary" @click="finishChoose">确定</el-button>
        <el-button size="mini" @click="emitClose">取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { groupListByValid } from '@/api/mall/goodsManagement'
import {broadcastRoomsList} from '@/api/shoppingMall/broad_casting';


export default {
  props: {
    liveDialogIsShow: {
      type: Boolean,
      default: false
    },
    dataList: {
      // type: Object,
      // default: true
    },
    // rightData: {
    //   type: Array,
    //   default: true
    // },
    hasCheckboxGroup: {
      type: Array,
      default: false
    }
    // groupId: {
    //   type: Array,
    //   default: []
    // }
  },
  data() {
    return {
      activeIndex: 0,
      groupId: null, // 分组id
      liveDataList: [], // 处理后的直播源列表
      rightData: [],
      checkboxGroup: [], // 勾选中的直播数据
    }
  },
  watch: {
    liveDialogIsShow(val) {
      if(val) {
        // this.checkboxGroup = JSON.parse(JSON.stringify(this.groupId));
        // this.activeIndex = 0;
        // groupListByValid().then(res => {
        //   this.dataList = res || [];
        //   this.rightData = res[0].children || [];
        // })
      }
    },

    dataList: {
      deep: true,
      immediate: true,
      handler(val) {
        if(val) {
          for (const key in this.dataList) {
            let obj = { 
              name: key,
              children: this.dataList[key]
            }
            this.liveDataList.push(obj)
          }
          if(this.liveDataList.length > 0) {
            this.rightData = this.liveDataList[0].children
            console.log('this.rightData=====>', this.rightData)
          }
          
          
        }
      }
    },

    // 监听hasCheckboxGroup（是否本来就有选中的直播间数据），如果有，勾选状态要回显出来
    hasCheckboxGroup: {
      deep: true,  // 深度监听
      immediate: true,
      handler(val) {
        // console.log('val======>', val)
        if(val) {
          this.checkboxGroup = this.hasCheckboxGroup
        }
      }
      
    }
  },
  mounted() {
    // this.checkedLeftItem(this.liveDataList[0].children, 0)
    // console.log('hasCheckboxGroup=======>', this.hasCheckboxGroup)
  },
  methods:{
    // 确认选择的数据
    finishChoose() {
      let arr = [];
      // if(this.dataList.length) {
        // let baseArr = this.dataList;
        // baseArr.forEach(item => {
        //   if(item.children&&item.children.length) {
        //     item.children.forEach(childItem => {
        //       if(this.checkboxGroup.indexOf(childItem.id) !== -1) {
        //         arr.push({id:childItem.id,name: childItem.roomName})
        //       }
        //     })
        //   }
        // })
      // }
      if(this.liveDataList && this.liveDataList.length) {
        this.liveDataList.forEach(item => {
          if(item.children && item.children.length) {
            item.children.forEach(childItem => {
              if(this.checkboxGroup.indexOf(childItem.id) !== -1) {
                arr.push(childItem)
              }
            })
          }
        })
      }
      if(arr.length) {
        this.$emit('finish',arr)
      }else {
        this.$message('请选择直播源数据')
      }
    },
    emitClose() {
      this.$emit('close')
    },
    // 点击分组
    checkedLeftItem(item,index) {
      // this.getBroadcastRoomsList(item.id, index)
      if(item && item.length) {
        this.rightData = item
      }else {
        this.rightData = [];
      }
      if(this.activeIndex !== index) {
        this.activeIndex = index;
      }
    },

    // 根据分组id，获取对应的直播间列表数据
    // getBroadcastRoomsList(data, index) {
    //   console.log('groupId: data===>', data)
    //   broadcastRoomsList({groupId: data}).then(res => {
    //     if(res.data && res.data.length) {
    //       this.rightData = res.data
    //     }else {
    //       this.rightData = [];
    //     }
    //     if(this.activeIndex !== index) {
    //       this.activeIndex = index;
    //     }
    //   })
    // },
  }
}
</script>

<style lang="scss" scoped>
  ::v-deep .scrollY {
    overflow-x: hidden;
  }
  .goodsGroupDialog {
    .contentWrap {
      border: 1px solid #999;
      border-radius: 4px;
      .leftWrap {
        width: 150px;
        height: 400px;
        background-color: #f0f0f0;
        //padding: 10px 0;
        .activeClass {
          background-color: #FFFFFF;
        }
        .leftItem {
          width: 100%;
          font-size: 14px;
          color: #464646;
          line-height: 32px;
        }
      }
      .rightWrap {
        width: 100%;
        .el-checkbox {
          display: block;
          padding: 5px 0;
        }
      }
    }
  }

</style>
